<template>
    <section>
        <!--高级查询表单-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="query">
                <el-form-item>
                    <el-input v-model="query.keyword" placeholder="关键字"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="search">查询</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <!--列表-->
        <el-table :data="pageInfo.rows" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column type="index"  width="60">
            </el-table-column>
            <el-table-column prop="name" label="名称" width="120" sortable>
            </el-table-column>
            <el-table-column prop="description" label="描述" width="120" sortable>
            </el-table-column>
        </el-table>

        <el-col :span="24" class="toolbar">
            <!--分页条
            total 就是当前满足条件的总条数
            @current-change="handleCurrentChange"  当当前页发生改变时会触发handleCurrentChange()
            -->
            <el-pagination layout="sizes,prev, pager, next"
                           @current-change="handleCurrentChange"
                           @size-change="handleSizeChange"
                           :page-size="query.pageSize"
                           :page-sizes="[10, 20, 30, 40]"
                           :current-page="query.currentPage"
                           :total="pageInfo.total"
                           style="float:right;">
            </el-pagination>
        </el-col>
    </section>
</template>

<script>
export default {
    data() {
        return {
            pageInfo:{
                rows: [],
                total: 0,
            },
            page: 1,
            listLoading: false,
            sels: [],//列表选中列
            addLoading: false,
            saveFormRules: {
                name: [
                    {required: true, message: '请输入名称', trigger: 'blur'}
                ]
            },
            query:{
                // 查询对象,包括分页条件和高级查询条件
                currentPage:1,  // 当前页,默认是查询第一页
                pageSize:10,    // 每页显示条数,默认是10条,当你第一次访问这个页面时,需要查第几页,每页几条
                keyword:""
            },
            typeList:[]
        }
    },
    methods: {
        getList(){
            this.$http.post("/sys/tenantType/list",this.query).then(res=>{
                console.log("+++++++++++++")
                res=res.data.resultObj
                this.pageInfo=res;
            })
        },
        selsChange: function (sels) {
            this.sels = sels;
        },
        search(){
            // 当 点击"查询"按钮时,要从第一页开始查询
            this.query.currentPage = 1;
            // 调用getDepartment方法查询数据
            this.getList();
        },
        handleCurrentChange(val) {
            // val它就是当前要访问的那个页码,当它发生改变时,需要修改query对象中的currentPage,只有当它发生改变,调到后端时,后端的currentPage才会拿到新的页码
            this.query.currentPage = val;
            // 重新调用getDepartment(),重新从后端获取数据渲染页面
            this.getList();
        },
        handleSizeChange(val){
            this.query.pageSize = val;
            this.getList();
        },
    },
    mounted() {
        this.getList();
    }
}

</script>

<style scoped>

</style>